<template>
	<view>
		<!-- 城市列表 -->
		<scroll-view class="es-city__scroll-view" :scroll-y="true" :scroll-into-view="scrollTopId"
			:scroll-with-animation="true" :enable-back-to-top="true"
			:style="{height:height,background:background}" >
			<view>
				<view class="es-city__name" @tap="onTapGps">
					{{!gpsCity?'点击获取当前定位城市': '当前定位城市: '+ gpsCity}}
					<text class="esfont icon-location"></text>
				</view>
			</view>
			<!-- 热门城市 -->
			<view  style="padding-bottom:25rpx;" v-if="hotCity && hotCity.length>0">
				<view class="es-city__letter" :style="{background:cellBg}" id="hot">★ 热门城市</view>
				<view class="es-city-hot">
					<view v-for="(item, index) in hotCity" :key="index" class="es-city-hot__item"  @tap="selectCity(item)">{{item}}</view>
				</view>
			</view>
			<!-- 全部 -->
			<view v-for="(group, idx) in cityData" :key="idx">
				<view class="es-city__letter"  :style="{background:cellBg}" :id="idx">{{idx}}</view>
				<view v-for="(item, index) in group" :key="index" class="es-city__name" @tap="selectCity(item.name)">{{item.name}}</view>
			</view>
		</scroll-view>

		<!-- 首字母 -->
		<view class="es-city-letter__wrapper" @touchstart="tStart" @touchend="tEnd" @touchmove.stop.prevent="tMove">
			<view class="es-city-letter__item" v-for="(item, index) in letterList" :key="index" @touchstart="getLetter" @touchend="setLetter" :id="item">
				{{item == 'hot' ? "★" : item}}
			</view>
		</view>
			
		<!--选择显示-->
		<view :hidden="hidden" class="es-city-letter__popup">{{showLetter == 'hot' ? "★" : showLetter}}</view>
	</view>
</template>

<script>
	let app = getApp();
	//引入高德地图key 请自行申请
	import config from '@/libs/config';
	import amapFile from "@/libs/amap-wx.js";
	import cityData from "./city.js";
	export default {
		props: {
			// 页面高度
			height:{
				type:String,
				default:"100vh"
			},
			// 页面背景色
			background:{
				type:String,
				default:"#ffffff"
			},
			// 字母分割线背景色
			cellBg:{
				type:String,
				default:"#f6f8fb"
			},
			//热门城市
			hotCity:{
				type:Array,
				default:function(){
					return []
				}
			},
		},
		data() {
			return {
				gpsCity: null,
				cityData: cityData,
				letterList: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W","X", "Y", "Z"],
				hidden: true,
				showLetter: '★',
				scrollTopId: "",
				itemHeight: 0,
				titleHeight: 0
			};
		},
		mounted: function(options) {
			let _this = this;
			
			//是否有热门城市
			if(this.hotCity && this.hotCity.length>0){
				this.letterList.unshift("hot")
			}
			
			//获取当前定位城市
			this.getGpsCity();
			
			//计算首字母高度
			setTimeout(() => {
				uni.getSystemInfo({
					success: function(res) {
						_this.titleHeight = res.windowHeight * 0.1;
						_this.itemHeight = res.windowHeight * 0.8 / _this.letterList.length;
					}
				})
			}, 50);
			
		},
		methods: {
			//点击当前定位城市
			onTapGps() {
				if (this.gpsCity) {
					this.$emit("change",this.gpsCity)
				} else {
					this.getGpsCity();
				}
			},
			// 获取当前定位城市
			getGpsCity() {
				let _this = this;
				//微信小程序
				// #ifdef MP
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.userFuzzyLocation']) {
							uni.authorize({
								scope: 'scope.userFuzzyLocation',
								success() {
									_this.saveGpsCity();
								},
								fail() {
									//如果拒绝，在这里进行再次获取授权的操作
									uni.showModal({
										content: '检测到您没打开此小程序的定位权限，是否去设置打开？',
										confirmText: "确认",
										cancelText: "取消",
										success: function(res) {
											//点击“确认”时打开设置页面
											if (res.confirm) {
												uni.openSetting({
													success: res => {
														_this.saveGpsCity();
													}
												});
											}
										}
									});
								}

							});
						}else{
							_this.saveGpsCity();
						}
					}

				});
				// #endif
				// #ifdef APP-PLUS
				_this.saveGpsCity();
				// #endif
			},
			//保存当前定位城市
			saveGpsCity() {
				var _this = this;
				uni.getFuzzyLocation({
					type: 'gcj02',
					success(res) {
						var myAmapFun = new amapFile.AMapWX({
							key: config.AMapKey
						});
						myAmapFun.getRegeo({
							location: res.longitude + ',' + res.latitude,
							//location的格式为'经度,纬度'
							success: function(data) {
								_this.gpsCity = data[0].regeocodeData.addressComponent.city.replace(/市/g,"");
							},
							fail: function(info) {}
						});
					}

				});
			},
			//选择城市
			selectCity(city) {
				this.$emit("change",city)
			},
			//获取文字信息
			getLetter(e) {
				this.hidden = false;
				this.showLetter = e.target.id;

			},
			setLetter(e) {
				this.hidden = true;
				this.scrollTopId = this.showLetter;
			},
			//滑动选择城市
			tMove(e) {
				let pageY = e.touches[0].pageY;
				let index = Math.floor((pageY - this.titleHeight) / this.itemHeight)
				this.showLetter = this.letterList[index];
			},
			//触发全部开始选择
			tStart() {
				this.hidden = false;
			},
			//触发结束选择
			tEnd() {
				this.hidden = true;
				this.scrollTopId = this.showLetter;
			}
		}
	};
</script>
<style>
	.es-city__scroll-view {
	    position: relative;
	    width: 750rpx;
	}
	
	.es-city__name {
	    box-sizing: border-box;
	    font-size: 30rpx;
	    color: #555555;
	    padding: 25rpx;
	    border-bottom: 1rpx solid #f6f8fb;
	}
	
	.es-city__letter{
	    box-sizing: border-box;
	    font-size: 23rpx;
	    color: #aaaaaa;
	    padding: 10rpx 25rpx;
	}
	
	.es-city-hot{
		display: flex;
		flex-wrap: wrap;
		padding-right: 50rpx;
	}
	
	.es-city-hot__item {
	    margin-left: 25rpx;
		margin-top: 25rpx;
	    padding: 10rpx 30rpx;
		border-radius: 4rpx;
		border: 1rpx solid #eeeeee;
	    font-size: 25rpx;
		color: #555555;
	}
	
	
	.es-city-letter__wrapper {
	   position: fixed;
	   top: 10%;
	   right: 0;
	   height: 80%;
	   display: flex;
	   flex-direction: column;
	   justify-content: space-around;
	}
	
	.es-city-letter__item {
	    font-size: 25rpx;
	    width: 60rpx;
	    height: 12px;
	    line-height: 12px;
	    text-align: center;
	    color: #555555;
	}
	
	.es-city-letter__popup {
	    width: 150rpx;
	    height: 150rpx;
	    background: #fff;
	    border-radius: 15rpx;
	    line-height: 150rpx;
	    text-align: center;
	    font-size: 80rpx;
	    margin: auto;
	    position: absolute;
	    top: 0;
	    left: 0;
	    bottom: 0;
	    right: 0;
	    z-index: 3;
	    color: #333333;
	    box-shadow: 0 0 150rpx rgba(0, 0, 0, 0.35);
	}
	

	
</style>